<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <style>
      .card {
        border: 1px gray solid;
        border-radius: 10px;
        padding: 15px;
        margin: 20px 0;
      }
      
      .card-title {
        font-size: 15px;
        font-weight: bold;
        margin: 10px;
      }
      
      .card-body > div {
        color: darkgray;
        background: pink;
        margin: 10px;
        height: 100px;
      }
      
      .card-body1 {
        display: grid;
        grid-template-areas: 'a b c'
                              'd e f';
      }
    </style>
  </head>
  <body>
    <!--grid-template-areas属性设置grid项放置位置，其属性值为面积名称，重复的面积名称必须连续。grid-template-areas配合grid-area属性使用，grid-area属性设置面积名称-->
    <div class="card">
      <div class="card-title">grid-template-areas属性设置grid项放置位置</div>
      <div class="card-body" style="display: grid;grid-template-areas: 'son1 son1 son2 son3 son4 son5 . son6 son6'">
        <div style="grid-area: son1">1</div>
        <div style="grid-area: son2">2</div>
        <div style="grid-area: son3">3</div>
        <div style="grid-area: son4">4</div>
        <div style="grid-area: son5">5</div>
        <div style="grid-area: son6">6</div>
      </div>
    </div>
    
    <div class="card">
      <div class="card-title">grid-template-areas属性设置grid项放置位置</div>
      <div class="card-body card-body1">
        <div style="grid-area: a">1</div>
        <div style="grid-area: b">2</div>
        <div style="grid-area: c">3</div>
        <div style="grid-area: d">4</div>
        <div style="grid-area: e">5</div>
        <div style="grid-area: f">6</div>
      </div>
    </div>
  </body>
</html>